<template>
  <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
  
      <div class="baseList">
        <div class="newBox">
          <button class="bt wt-120" @click="handleBulid()">新增护理项目</button>
        </div>
        <div class="tableBoxs">
  <t-table
    :row-key="index"
    :data="data"
    :columns="COLUMNS"
    :bordered="bordered"
    :hover="hover"
    :size="size"
    :show-header="showHeader"
    cell-empty-content="-"
    resizable
    lazy-load
  >
  <template #image="{row}">
<div>
  <div class="tdesign-demo-image-viewer__base">
    <t-image-viewer :images="[row.image]">
      <template #trigger="{ open }">
        <div class="tdesign-demo-image-viewer__ui-image">
          <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
          <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
            <span><BrowseIcon size="1.4em" /> 预览</span>
          </div>
        </div>
      </template>
    </t-image-viewer>
  </div>
</div>
</template>
<template #price="{row}">
{{ row.price.toFixed(2) }}
</template>
   <!-- 操作栏 -->
   <template #op="{ row }">
    <div class="operateCon">
      <a 
      class="btn-dl"
      >删除</a>
      <a 
      class="font-bt" @click="handleEdit(row.id)"
      >编辑</a>
      <a 
      class="delete"
      >禁用</a>
    </div>
  </template>
  <template #rowIndex="{rowIndex}">
    {{ (pagination.pageNum-1)*pagination.pageSize+(rowIndex+1) }}
  </template>
  </t-table>
  <!-- 分页 -->
  <t-pagination
  v-if="total>4"
    v-model="pagination.pageNum"
    v-model:pageSize="pagination.pageSize"
    :total="total"
    @change="onPageChange"
  />
        </div>
      </div>
  
</template>

<script setup lang="jsx">

import { size } from "lodash";
import { COLUMNS } from "../constants";
const props=defineProps({
  data:{
    type:Object,
    default:[]
  },
  bordered:Boolean,
  hover:Boolean,
  size:Number,
  total:Number,
  pagination:{
    type:Object,
  default:{}
  }
})
//接收事件
const emits=defineEmits(['onPageChange'])
//当前子组件onPageChange事件函数
const onPageChange=(pageInfo)=>{
  emits('onPageChange',pageInfo)
}

//执行新增事件
const handleBulid=()=>{
  emits('handleBulid')
}

//编辑点击事件
const handleEdit=(id)=>{
  emits('handleEdit',id)
}
</script>
